<template>
  <div class="login">
    <br>
    <NavBar style="margin-top: 1rem;width: 98%;margin-left: 1%">
      <span slot="search">用户注册</span>
    </NavBar>
    <div class="head">
      <div class="img">
        <img src="/img/head.png">
      </div>
    </div>
    <!--登陆-->
    <form>
      <div class="item">
        <i class="fa fa-user-circle"></i>
        <input @blur="check" type="text" v-model="username" placeholder="请输入帐号" autocomplete="off" class="name">
      </div>
      <div class="item">
        <img src="/img/icon-lock.png" alt="">
        <input type="password" v-model="password" placeholder="请输入密码" autocomplete="off" class="password">
      </div>
      <div class="item">
        <img src="/img/icon-lock.png" alt="">
        <input type="password" v-model="againPassword" placeholder="请再次输入密码" autocomplete="off" class="password">
      </div>
      <div class="submit">
        <input @click.prevent="register" type="button" value="注册">
      </div>
      <div class="reg">
        <a href="#" @click.prevent="toLogin">已有账号？去登录</a>
      </div>
    </form>
    <!--尾部-->
    <div class="footer">
      <p>注册使用就表示同意<a href="javascript:;">用户协议条款</a>和<a href="javascript:;">隐私政策</a></p>
    </div>
  </div>
</template>

<script>
import NavBar from "../navbar/NavBar";
import qs from "qs";
export default {
  name: "Register",
  methods: {
    //去登录页面
    toLogin(){
      this.$router.replace('/login')
    },
    //验证用户名是否已经被注册
    check(){
      let data = qs.stringify({
        username: this.username
      })
      this.axios({
        url: 'http://192.168.3.4:3001/check',
        method: 'post',
        data: data
      }).then((res)=>{
        if (res.data.flag){
        }else{
          this.username = '';
          alert(res.data.message);
        }
      })
    },
    //注册
    register(){

      if (!this.username){
        alert('用户名不能为空！！！');
      }else if (!this.password){
        alert('密码不能为空！！！');
      }else if (!this.againPassword){
        alert('密码不能为空！！！');
      }else if (this.password !== this.againPassword){
        alert('两次输入的密码不一致，请重新输入！！！');
      }else{
        //提交注册
        let data = qs.stringify({
          username: this.username,
          password: this.password
        })
        this.axios({
          url: 'http://192.168.3.4:3001/register',
          method: 'post',
          data: data
        }).then((res)=>{
          //注册成功
          if (res.data.flag){
            alert('注册成功！！！');
            //跳转登录页面
            this.$router.push('/login');
          }
        })
      }
    }
  },
  data(){
    return{
      username: '',
      password: '',
      againPassword: ''
    }
  },
  components: {
    NavBar
  }
}
</script>

<style scoped>
.login{
  width: 98%;
  height: 19rem;
  margin-left: 1%;
  background-color: white;
}
.head{
  height: 5rem;
}
.head .img{
  text-align: center;
  width: 60%;
  height: 5rem;
  line-height: 4rem;
  margin: 0 auto;
}
.head .img img{
  display: inline-block;
  width: 70%;
  height: 3.5rem;
  line-height: 3.5rem;
  margin-top: 1.25rem;
}
.item{
  width: 85%;
  height: 2rem;
  margin: 0.4rem auto 0;
  position: relative;
}
.item input{
  display: inline-block;
  width: 100%;
  height: 1.5rem;
  margin-top: 0.25rem;
  border: none;
  outline: none;
  border-radius: 30px;
  text-align: center;
  font-size: 0.6rem;
  background-color: #DDDDDD;
}
.item img{
  position: absolute;
  width: 0.6rem;
  height: 0.75rem;
  top: 0.625rem;
  left: 0.6rem;
}
.item i{
  position: absolute;
  width: 0.6rem;
  font-size: 0.7rem;
  height: 0.75rem;
  top: 0.64rem;
  left: 0.6rem;
}
.submit{
  width: 40%;
  height: 1.2rem;
  margin: 0.6rem auto 0;
}
.submit input{
  display: block;
  width: 90%;
  height: 1.2rem;
  font-size: 0.8rem;
  border: none;
  outline: none;
  border-radius: 30px;
  margin-left: 5%;
  background-color: #00CCFF;
}

.reg{
  width: 100%;
  height: 1rem;
  margin-top: 10px;
}
.reg a{
  display: block;
  width: 50%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.4rem;
  margin: -0.3rem auto 0;
}
.other-login{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
}
.other-login p{
  height: 1rem;
  line-height: 1rem;
}
.other-login p span{
  text-align: center;
  display: block;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.5rem;
}
.third{
  width: 100%;
  height: 1rem;
}
.third ul{
  width: 40%;
  height: 1rem;
  margin: 0 auto;
}
.third ul li{
  text-align: center;
  list-style: none;
  display: inline-block;
  float: left;
  font-size: 0.6rem;
  width: 33.333%;
}
.footer{
  width: 100%;
  height: 1rem;
  font-size: 0.4rem;
  background-color: skyblue;
}
.footer p{
  text-align: center;
  height: 1rem;
  line-height: 1rem;
}
</style>